import { LeftOutlined } from '@ant-design/icons'
import './searchpwd.css'
import {Input,Space,Button,message} from 'antd'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { getUser2Djm,putUserDjm } from '../api/api'
function SearchPwd() {
  const navigate = useNavigate()
  const [phone, setPhone] = useState(null)
  const [code, setCode] = useState('')
  const [newpwd, setNewPwd] = useState(null)
  const [newpwd2, setNewPwd2] = useState(null)
  const [m, setM] = useState(null)
  const [changeFont, setChangeFont] = useState('获取验证码')
  const [messageApi, contextHolder] = message.useMessage();
  const [show,setShow]=useState(false)
  const [id,setId]=useState(null)
  const [old,setOld]=useState(null)
  const next=()=>{
    getUser2Djm(phone).then(res=>{
      console.log(res);
      if(res.msg=="查找成功"&&code==m){
        setShow(true)
        setId(res.data.id)
        setOld(res.data.password)
      }else if(res.msg=="没有此条数据！"){
        messageApi.open({
          type: 'error',
          content: '该用户不存在',
        });
      }else if(code!=m){
        messageApi.open({
          type: 'error',
          content: '验证码错误',
        });
        
      }else if(phone==''){
        messageApi.open({
          type: 'error',
          content: '手机号不能为空',
        });
      }
    })
  }
  const ok=()=>{
    if(old!=newpwd){
      putUserDjm({id,password:newpwd}).then(res=>{
        navigate(-1)
      })
    }else if(newpwd!=newpwd2){
      messageApi.open({
        type: 'error',
        content: '密码不一致',
      });
    }else if(old==newpwd){
      messageApi.open({
        type: 'error',
        content: '不能和旧密码一致',
      });
    }
  }
  return (
    <div className='s-pwd'>
      {contextHolder}
      <div className='s-mar'>
        <div className="s-header">
          <div className="s-back">
            <LeftOutlined onClick={() => {
              navigate(-1)
            }} />
          </div>
          <div className='s-title'>
            {show?'新密码':'忘记密码'}
          </div>
          <div className='s-right'>

          </div>
        </div>
        {!show&&<div className='reg-ipt'>
          <Space.Compact style={{ width: '100%' }}>
            <Input type="number" onChange={(e) => { setPhone(e.target.value) }} value={phone} className='reg-ipt-item' placeholder='请输入手机号'></Input>
            <Button onClick={() => {
              let p = /^[\d]{11}$/;
              if(p.test(phone)){
                let code = Math.floor(Math.random() * 4000 + 1000)
                console.log(code);
                setM(code)
                let num = 60
                let Time = setInterval(() => {
                  if (num != 0) {
                    num--
                    setChangeFont(num)
                  } else {
                    clearInterval(Time)
                    setChangeFont('获取验证码')
                  }
                }, 1000)
              }else{
                messageApi.open({
                  type: 'error',
                  content: '手机号长度必须为11位',
                });
              }
            }} type="primary">{changeFont}</Button>
          </Space.Compact>
          <Input onChange={(e) => { setCode(e.target.value) }} value={code} className='reg-ipt-item' placeholder='请输入验证码'></Input>
          <Button onClick={() => next()} block style={{ background: '#e98f36', color: '#fff', marginTop: '10px' }}>下一步</Button>
        </div>}
        {show&&<div className='reg-ipt'>
          <Input onChange={(e) => { setNewPwd(e.target.value) }} value={newpwd} className='reg-ipt-item' placeholder='请输入新密码'></Input>
          <Input onChange={(e) => { setNewPwd2(e.target.value) }} value={newpwd2} className='reg-ipt-item' placeholder='请再次输入新密码'></Input>
          <Button onClick={() => ok()} block style={{ background: '#e98f36', color: '#fff', marginTop: '10px' }}>确定</Button>
        </div>}
      </div>
    </div>
  )
}
export default SearchPwd